<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet"> 
    <link href="../css/index.css" rel="stylesheet">    
    <title>推荐食材</title>
  </head>
  <body>
    <div class="topic foods">
      <h3><i class="icon-1"></i> {{recMaterialTitle}}</h3>


      <p class="info">{{recMaterialDesc}}</p>
      <ul class="box-li">
        <li class="item" v-for="item in lists">
          <div class="box-li">
            <img :src="item.images[0]" alt="">
            <div class="pictext">
              <h4>{{item.title}}</h4>
              <p>{{item.tags}}</p>
            </div>
          </div>
          <p class="info-li">{{item.instructions}}</p>    
        </li>

      </ul>
    </div>

    <script>

      // 字体控制
      function setFontsize() {
          document.querySelector('html').style.fontSize = (window.screen.width / 375 * 10 + 'px');
      }
      setFontsize();
      window.onresize = function() {
          setFontsize();
      }



    </script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/vue-resource1.3.4.js"></script>
    <script>
        var vm = new Vue({
            el: '.topic',
            data:{
              lists:{},
              recMaterialTitle:'',
              recMaterialDesc:'',
              recFoodTitle:'',
              recFoodDesc:''
            },
            created:function(){
                var $this = this;

                var $this = this;
                this.$http.post('/fotile-api-0.0.2/health/userDetail',{"userId":120376}).then(function(data){
                    var data = data.data;
                    if(data.status == 200){
                      
                       this.recMaterialTitle = data.data.health.userHealthType.recMaterialTitle;
                       this.recMaterialDesc = data.data.health.userHealthType.recMaterialDesc;
                       this.recFoodTitle = data.data.health.userHealthType.recFoodTitle;
                       this.recFoodDesc = data.data.health.userHealthType.recFoodDesc;


                       
                    }
                    
                },function(){
                    console.info('error');
                });


                this.$http.post('/fotile-api-0.0.2/menu/getMaterialBySubClassName',{"pageNum":1,"pageSize":4,"sub_name":"平和质"}).then(function(data){
                    var data = data.data;
                    if(data.status == 200){
                        this.lists = data.data;
                        console.info(this.lists);
                    }
                    
                },function(){
                    console.info('error');
                });

            }
        });

    </script>

  </body>
</html>